{%extends "root.html" %}

<body>
	{% block userInfo %}
	<div class="title iconfont icon-shezhi"> 个性化</div>
	{% endblock %}

	{% block mainbody %}
	<!-- 这里放置主要内容 -->
	<style type="text/css">
		.subContent {
			display: grid;
			width: calc(45vw);
			margin: 0 auto;
			min-width: 750px;
			grid-template-columns: 1fr 1fr;
		}

		main {
			min-height: calc(75vh - 118px);
		}

		@media only screen and (max-width:768px) {
			.subContent {
				display: grid;
				width: 90vw;
				margin: 0 auto;
				grid-template-columns: 1fr;
				min-width: 0px;
			}
			main {
				min-height: calc(75vh - 38px);
			}
		}
	</style>
	<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>

	<div class="settingsContainer">
		<div class="iconfont icon-pan_icon"> 用户名</div>
		<input type="text" name="" id="username" value="{{nickName}}" />
		<div class="iconfont icon-yonghuming"> 头像(url)</div>
		<input type="text" name="" id="avatarUrl" value="{{avatar}}" />
		<div class="iconfont icon-lianjie"> iconfont链接</div>
		<input type="text" name="" id="iconfont" value="{{iconfont}}" />
		<div class="iconfont icon-tubiao_huaban"> 首页图标</div>
		<textarea placeholder="样例: icon-boke@https://grimoire.cn" id="iconListString"></textarea>
		<div class="sub">
			<button type="button" onclick="window.location='/metas'" class="iconfont icon-qiehuan"> 分类管理</button>
			<button type="button" onclick="save()" class="iconfont icon--custom-save"> 保存</button>
		</div>

	</div>
	<script type="text/javascript">
		// 渲染页面
		let textarea = document.querySelector("div>textarea");
		textarea.value = `{{iconListString}}`

		axios.interceptors.request.use((config) => {
			config.headers['X-Requested-With'] = 'XMLHttpRequest';
			let regex = /.*csrftoken=([^;.]*).*$/;
			config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];
			return config
		});

		function save() {
			let username = document.querySelector("#username").value;
			let avatar = document.querySelector("#avatarUrl").value;
			let iconfont = document.querySelector("#iconfont").value;
			let iconListString = document.querySelector("#iconListString").value;

			let httpUrl = "/updateUserInfo/";
			layer.msg(avatar)
			let data = Qs.stringify({
				"nickname": username,
				"avatar": avatar,
				"iconfont": iconfont,
				"iconListString": iconListString,
			});
			// layer.msg(data)
			axios.post(
				httpUrl,
				data,
			).then((value) => {
				layer.msg(value.data.msg)
			}).catch((error) => {
				console.log(error);
			})
		}
	</script>

	<style type="text/css">
		/* @import url("//at.alicdn.com/t/font_2336002_go3jvbbk1c.css"); */

		.title {
			/* margin: 5vh auto; */
			margin: 5vh auto;
			text-align: center;
			font-size: 36px;
			line-height: 38px;
		}

		.settingsContainer {
			width: 40vw;
			margin: 0 auto;
			/* padding: 20px; */
		}

		.settingsContainer>div {
			margin-top: 10px;
			margin-bottom: 5px;
		}

		.settingsContainer>input[type="text"] {
			width: calc(100% - 24px);
			line-height: 24px;
			font-size: 14px;
			/* border-radius: 5px; */
			padding-left: 10px;
			padding-right: 10px;
			letter-spacing: 1px;
			outline: none;
			border: 2px solid transparent;
			background-color: #f9f9f9;
			border-radius: 12px;
		}

		.settingsContainer>input[type="text"]:focus {
			/* border: 2px solid #11999e; */
			background-color: #f3f3f3;
		}

		.settingsContainer textarea {
			border: 0;
			width: calc(100% - 24px);
			height: 10vh;
			padding: 10px;
			resize: none;
			outline: none;
			border: 2px solid transparent;
			background-color: #f9f9f9;
			border-radius: 4px;
			/* font-family: "微软雅黑"; */
			font-size: 14px;
		}

		.settingsContainer textarea:focus {
			/* border: 2px solid #11999e; */
			background-color: #f3f3f3;
		}

		.settingsContainer>.sub {
			display: flex;
		}

		.settingsContainer button {
			width: 49%;
			/* height: ; */
			padding-top: 8px;
			padding-bottom: 8px;
			outline: none;
			/* margin-top: 8px; */
			cursor: pointer;
			font-size: 16px;
			margin: 8px auto;
			transition: color .4s, background-color .4s, border-color .4s;
			background-color: #FFFFFF;
			color: #11999e;
			border: 2px solid #11999e;
		}

		.settingsContainer button:hover {
			background-color: #11999e;
			border: 2px solid #11999e;
			color: #FFFFFF;
		}

		@media only screen and (max-width:768px) {
			.settingsContainer {
				width: 90vw;
				margin: 0 auto;
				/* padding: 20px; */
			}
		}
	</style>


	{% endblock %}
</body>